<template>
  <div>
    <el-row class="tender-container">

      <el-col :span="24"
              class="tender-col">
        <LocationSelect class="address-select"
                        :locaData.sync='getAddress'></LocationSelect>
        <el-input placeholder="项目名称"
                  v-model="keyword"
                  suffix-icon=""
                  class="pro-input">
          <el-button type="primary"
                     slot="append"
                     icon="el-icon-search"
                     @click="sosoData(keyword)"
                     class="pro-btn"></el-button>
        </el-input>
      </el-col>
      <el-col :span="24">
        <el-row>
          <el-col :span="6"
                  v-for="(item, index) in projectCard.list"
                  :key="index"
                  class='list-col'>
            <el-card :body-style="{ padding: '8px' }"
                     class="list-card">
              <div class="img_test">
                <img :src="item.img?item.img:'/static/img/defaultImg.png'"
                     class="image"
                     @click="JumpPage(item)">
                <span class="time">{{item.update_time}}</span>
              </div>
              <div class="yard_title">
                <span class="item_title"
                      :title="item.project_name"
                      @click="JumpPage(item)">{{item.project_name}}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24"
              class="bottom-col">
        <el-pagination background
                       @current-change="handleCurrentChange"
                       :current-page="projectParams.page"
                       :page-sizes="[8]"
                       :page-size="projectParams.per_page"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="projectCard.total_count">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { TenderApi } from '@/services/ResourceCentre'
import LocationSelect from '../../../components/LocationSelect/LocationSelect'
export default {
  components: {
    LocationSelect
  },
  data () {
    return {
      image: '../../static/img/111.jpg',
      keyword: '', // 搜索的内容
      projectCard: {
        list: [],
        total_count: 0
      },
      codeType: 'modelLifePath',
      projectParams: {
        per_page: 8,
        province_no: '',
        city_no: '',
        area_no: '',
        page: 1,
        project_name: ''
      },
      getAddress: {

      },
      addressData: {}
    }
  },
  watch: {
    getAddress: {
      handler (newval, oldval) {
        this.addressData = JSON.parse(JSON.stringify(newval))
        this.projectParams.province_no = this.addressData.province_no
        this.projectParams.city_no = this.addressData.city_no
        this.projectParams.area_no = this.addressData.area_no
        this.startData()
      },
      deep: true
    }
  },
  methods: {
    // 分页功能
    handleCurrentChange (page) {
      this.projectParams.page = page
      this.startData()
    },
    // 搜索功能
    sosoData (data) {
      this.projectParams.project_name = data
      this.projectParams.page = 1
      this.handleCurrentChange(this.projectParams.page)
    },
    // 页面初始化数据渲染
    startData () {
      TenderApi.getProjectList({
        params: this.projectParams
      }).then(res => {
        this.projectCard.list = res.data.data
        this.projectCard.total_count = res.data.total
      }, err => {
        console.log(err)
      })
    },
    // 页面跳转
    JumpPage (data) {
      this.$router.push({ path: '/SellerMarket', query: { project_id: data.project_id } })
    }
  },
  created () {
    this.startData()
  }
}
</script>
<style lang='scss' scoped>
.tender-container {
  padding: 20px;
  background: #fff;
  min-height: 800px;
}
.tender-col {
  margin-bottom: 40px;
  width: 100%;
  float: left;
}
.pro-input {
  width: 20%;
  float: right;
}
.address-select {
  width: 80%;
  float: left;
}
.pro-btn {
  color: #fff;
  background: #1890ff;
}
.pro-area {
  margin-right: 12px;
  width: 120px;
  float: right;
}
.pro-city {
  margin-right: 12px;
  width: 120px;
  float: right;
}
.pro-province {
  margin-right: 12px;
  width: 120px;
  float: right;
}
.list-col {
  margin-bottom: 15px;
}
.list-card {
  width: 100%;
  cursor: pointer;
}
/deep/ .el-menu-item-group__title {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
/deep/ .el-input__inner {
  text-align: left;
  font-size: 12px;
}

.image {
  display: block;
  width: 100%;
  height: 100%;
}
/deep/ .el-card {
  border: 0 !important;
  box-shadow: 0px 0px 0px 0px !important;
}
.time {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #fff;
  font-size: 14px;
}
.yard_title {
  width: 100%;
  padding: 14px 5px;
  overflow: hidden;
}
.item_title {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
  font-size: 14px;
  color: #333;
}
.img_test {
  width: 100%;
  height: 175px;
  padding: 0px;
  background: #aaa;
  position: relative;
}
.img_test img {
  display: block;
  width: 100%;
  height: 100%;
  background: #ccc;
}
.bottom-col {
  padding-top: 40px;
  text-align: center;
}
</style>
